<template>
	<view class="head-image" @longpress.prevent="longpress" @tap="showUserInfo($event)" :title="name"
		@touchend="touchend">
		<image-display class="avatar-image" v-if="url" :src="url" mode="aspectFill"
			:custom-style="{ width: size+'rpx', height: size+ 'rpx' }"></image-display>
		<view class="avatar-image" v-else :style="{ width: size  + 'rpx', height: size  + 'rpx' }">
			<!-- <loading-mask v-if="isGroup" v-model="avatarGridLoading"> -->
			<avatar-grid v-if="isGroup" :expires="5000" :fallback-text="name" @drawn="drawn"
				:canvas-size="size / 2"></avatar-grid>
			<!-- </loading-mask> -->
			<!-- <loading-mask v-else v-model="avatarGridLoading"> -->
			<avatar-grid v-else :canvas-size="size / 2" :expires="5000" :fallback-text="name"
				@drawn="drawn"></avatar-grid>
			<!-- </loading-mask> -->
		</view>
		<view class="online">
			<up-badge v-if="online" type="success" class="online" is-dot></up-badge>
		</view>
	</view>
</template>

<script>
	import {
		MyURLSearchParams
	} from '@/utils'
	export default {
		name: "head-image",
		data() {
			return {
				colors: ['#EAEAEA'],
				islongPress: false,
				avatarGridLoading: true,
			}
		},
		props: {
			id: {
				type: Number
			},
			type: {
				type: Number
			},
			size: {
				type: Number,
				default: 20
			},
			url: {
				type: String
			},
			name: {
				type: String,
				default: "?"
			},
			online: {
				type: Boolean,
				default: false
			},
			isGroup: {
				type: Boolean,
				default: false
			},
			urlParams: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			drawn() {
				this.avatarGridLoading = false
			},
			longpress() {
				this.islongPress = true;
				this.$emit('longPressHead')
			},
			touchend() {
				//延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
				setTimeout(() => {
					this.islongPress = false
				}, 200)
			},
			showUserInfo(e) {
				if (this.islongPress) {
					return
				}
				if (this.id && this.id > 0) {
					const params = {
						...this.urlParams,
						id: this.id,
						friendType: this.type
					}
					const queryString = new MyURLSearchParams(params).toString();
					uni.navigateTo({
						// url: "/pageSubOne/common/user-info?id=" + this.id
						url: `/pageSubOne/common/user-info?${queryString}`
					})
				}
			}
		},
		computed: {
			avatarImageStyle() {
				return `width:${this.size}rpx; height:${this.size}rpx;`
			},
			avatarTextStyle() {
				return `width: ${this.size}rpx;height:${this.size}rpx;
				color:${this.textColor};font-size:${this.size * 0.5}rpx;
				border: 2px solid ${this.textColor};
				box-shadow: 0px 0px 5rpx ${this.textColor}`
			},
			textColor() {
				let hash = 0;
				for (var i = 0; i < this.name.length; i++) {
					hash += this.name.charCodeAt(i);
				}
				return this.colors[hash % this.colors.length];
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-image {
		position: relative;
		cursor: pointer;
		width: 50px;
		height: 50px;

		.avatar-image {
			position: relative;
			overflow: hidden;
			border-radius: 8px;
			vertical-align: bottom;
			box-sizing: border-box;
		}

		.avatar-text {
			border-radius: 16%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.online {
			position: absolute;
			right: 2rpx;
			bottom: 4rpx;
			// width: 24rpx;
			// height: 24rpx;
			// background: limegreen;
			// border-radius: 50%;
			// border: 6rpx solid white;
		}
	}
</style>